/**
 * Created by 86185 in 2020/8/30 on 11:32
 */
import React from "react"

import "@/components/common/PieDoughnutChart/PieDoughnutChart.component.styl"

class PieDoughnutChart extends React.Component {
    constructor(props) {
        super(props);
    }

    initChart() {
        let {id, seriesName, seriesData} = this.props.pieDoughnutData;
        let myChart = echarts.init(document.getElementById(`${id}-pie-doughnut-chart`));
        let option = {
            tooltip: {
                trigger: "item",
                textStyle:{
                    fontSize: 12,
                },
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            series: [
                {
                    name: seriesName,
                    type: "pie",
                    radius: ["50%", "70%"],
                    label: {
                        color: "#fff",
                        fontSize: 14,
                        formatter: function (params) {
                            return `${params.name}\n\n${params.percent}%`
                        }
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    },
                    itemStyle: {
                        borderWidth: 5,
                        borderColor: "#093068"
                    },
                    data: seriesData
                }
            ]
        };
        window.onresize = function () {
            myChart.resize();
        }
        myChart.setOption(option);
    }

    componentDidMount() {
        this.initChart();
    }

    render() {
        return (
            <div id={`${this.props.pieDoughnutData.id}-pie-doughnut-chart`} className="pie-doughnut-chart">

            </div>
        )
    }
}

export default PieDoughnutChart